<template>
	<view class="overtime">
		<view class="bg-wrap">
			<u-image width="100%" height="283rpx" src="@/static/image/home/home_bg.png"></u-image>
		</view>
		<!-- 接收时间按钮 -->
		<view class="time-select" @click="showSelect">
			<!-- <text>紧急度</text>
			<u-image width="22rpx" height="22rpx" src="@/static/image/home/backlog_declare/select.png"></u-image> -->
		</view>
		<view class="list">
			<pilicy-list v-if="data.length > 0" :list="data" :type="true" :isTimeOut="true" @click="handleClick"></pilicy-list>
			<view class="no-data" v-else>
				<u-empty text="暂无记录" mode="data"></u-empty>
			</view>
		</view>
		<!-- 接收时间下拉框 -->
		<u-select v-model="show" :list="list" @confirm="confirm" :type="type"></u-select>
	</view>
</template>

<script>
	import PilicyList from '../../../components/pilicy-list/PilicyList.vue'
	import { apiGetTimeoutAppeal } from '@/api/overtime/overtime.js'
	export default {
		name: 'Overtime',
		components: { PilicyList },
		data() {
			return {
				show: false,
				list: [],
				data: [],
				//超时类型
				type: true
			}
		},
		onShow() {
			//获取超时预警列表
			this.apiGetTimeoutAppeal();
			// if (this.$Router.query.type) {
				
			// }
			
		},
		methods: {
			//下拉框确认回调
			confirm (e) {
				
			},
			//显示接收时间下拉框
			showSelect () {
				this.show = true;
			},
			//跳转至当前预警事项详情
			handleClick (info) {
				if (info.is_jb == 2) {
					this.$Router.push({
						name: 'backlog_declare_detail',
						params: {
							id: info.appeal_id,
						}
					})
				} else {
					if (info.is_urge_organization == 2 ) return
					this.$Router.push({
						name: 'finish_item',
						params: {
							current: 3,
							id: info.appeal_id,
							timeout: info.timeout
						}
					})
				}
			},
			//获取超时预警列表
			async apiGetTimeoutAppeal () {
				const res = await apiGetTimeoutAppeal();
				this.data = res.data;
				console.log(res)
			}
		}
	}
</script>

<style lang="scss" scoped>
	.overtime {
		padding: 20rpx;
	}
	.bg-wrap {
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		z-index: -1;
	}
	
	.time-select {
		display: flex;
		justify-content: flex-end;
		text {
			margin-right: 12rpx;
			font-size: 26rpx;
			color: #FFFFFF;
		}
	}
	.list {
		margin-top: 22rpx;
	}
	.no-data {
		display: flex;
		align-items: center;
		justify-content: center;
		padding: 30rpx;
		width: 710rpx;
		height: calc(100vh - 60rpx);
		background: #FFFFFF;
		border-radius: 20rpx;
	}
</style>
